
// import Vue from 'vue';

// Vue.directive('loadmore', {
//     bind: function(el, binding) {
//         const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown.el-popper.virtual-list .el-select-dropdown__wrap.el-scrollbar__wrap');
//         const div = document.createElement('div');
//         div.className = "visible-list"
//         div.appendChild(SELECTWRAP_DOM.children[0])
//         SELECTWRAP_DOM.appendChild(div)
//         SELECTWRAP_DOM.addEventListener('scroll', function(e) {
//             const firstIndex = Math.floor(e.target.scrollTop / 34);
//             const secondIndex = firstIndex + 8;
//             binding.value(firstIndex, secondIndex, e.target.scrollTop);
//         })

//     }
// })
import type { DirectiveBinding } from 'vue';

const loadmore = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const SELECTWRAP_DOM = el.querySelector(
      '.el-select-dropdown.el-popper.virtual-list .el-select-dropdown__wrap.el-scrollbar__wrap',
    ) as HTMLElement;
    const div = document.createElement('div');
    div.className = 'visible-list';
    if (SELECTWRAP_DOM?.children[0]) {
      div.appendChild(SELECTWRAP_DOM.children[0]);
    }
    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.appendChild(div);
    }
    const scrollHandler = (e: Event) => {
      const target = e.target as HTMLElement;
      const firstIndex = Math.floor(target.scrollTop / 34);
      const secondIndex = firstIndex + 8;
      binding.value(firstIndex, secondIndex, target.scrollTop);
    };
    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.addEventListener('scroll', scrollHandler);
    }

    // 在元素卸载时移除事件监听器
    return () => {
      if (SELECTWRAP_DOM) {
        SELECTWRAP_DOM.removeEventListener('scroll', scrollHandler);
      }
    };
  },
};

export default loadmore;
